/* pages/techingPositions/index/index.wxss */
.post_container {
  width: 750rpx;
  min-height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #f5f5f5;
  font-weight: 400;
  font-family: PingFangSC-Regular, PingFang SC;
  .navigator_box {
    background: #014ebf;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-left: 32rpx;
    padding-bottom: 12rpx;
    box-sizing: content-box;
    .position {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      .text {
        max-width: 130rpx;
        height: 48rpx;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 48rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .arrow_down {
        width: 48rpx;
        height: 48rpx;
      }
    }
    .navi_title {
      width: 100%;
      font-size: 34rpx;
      color: #ffffff;
      line-height: 48rpx;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .banner_box {
    width: 100%;
    height: 80rpx;
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0px 18rpx 56rpx 16rpx rgba(0, 0, 0, 0.05),
      0px 12rpx 32rpx 0px rgba(0, 0, 0, 0.08),
      0px 6rpx 12rpx -8rpx rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    .wx_logo,
    .close,
    .arrow_right {
      width: 56rpx;
      height: 56rpx;
      &.wx_logo {
        margin-left: 32rpx;
      }
      &.close {
        margin-left: 16rpx;
      }
      &.arrow_right {
        margin-left: 14rpx;
      }
    }
    .text {
      height: 56rpx;
      font-size: 24rpx;
      line-height: 56rpx;
      margin-left: 16rpx;
      &.text_login {
        width: 456rpx;
      }
      &.text_not_login {
        width: 576rpx;
      }
    }
    .m_follow_btn {
      width: 136rpx;
      height: 48rpx;
      background: linear-gradient(270deg, #00c25f 0%, #4bbf84 100%);
      border-radius: 28rpx;
      margin-left: 22rpx;
      font-size: 22rpx;
      color: #ffffff;
      line-height: 32rpx;
      padding: 0;
      border: unset;
    }
  }
  .bg_box {
    width: 100%;
    height: 940rpx;
    position: absolute;
    top: 0;
    left: 0;
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .post_box {
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
    .header_box {
      width: 100%;
      height: fit-content;
      position: relative;
      padding-top: 16rpx;
      box-sizing: border-box;
      .search_box {
        width: 100%;
        height: 88rpx;
        background: #ffffff;
        box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.14);
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        padding: 16rpx;
        box-sizing: border-box;
        .img {
          width: 56rpx;
          height: 56rpx;
        }
        .placeholder {
          height: 56rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
          line-height: 56rpx;
          margin-left: 16rpx;
        }
      }
      .swiper_box {
        width: 100%;
        height: 306rpx;
        box-shadow: 0px 4rpx 14rpx 0px rgba(142, 142, 147, 0.15);
        margin-top: 32rpx;
        .swiper--m_swiper {
          height: 306rpx;
          .swiper--swiper_item {
            height: 100% !important;
            .swiper--swiper_image {
              border-radius: 16rpx;
            }
          }
        }
        .wx-swiper-dot {
          width: 16rpx;
          height: 16rpx;
        }
        .wx-swiper-dot-active {
          width: 48rpx;
          height: 16rpx;
          border-radius: 10rpx;
        }
      }
      .icon_box {
        width: 100%;
        height: 220rpx;
        background: #ffffff;
        box-shadow: 0px 4rpx 14rpx 0px rgba(142, 142, 147, 0.15);
        border-radius: 16rpx;
        border: 2rpx solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-top: 32rpx;
        padding-top: 32rpx;
        padding-bottom: 32rpx;
        box-sizing: border-box;
        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          text-align: center;
          .img {
            width: 84rpx;
            height: 84rpx;
          }
          .text {
            height: 36rpx;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 36rpx;
          }
          .tips {
            width: 128rpx;
            height: 36rpx;
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.5);
            line-height: 36rpx;
          }
        }
      }
    }
    .hotpost_box {
      width: 100%;
      height: fit-content;
      margin-top: 32rpx;
      position: relative;
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32rpx;
        position: relative;
        .title {
          width: 160rpx;
          height: 72rpx;
          font-size: 40rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          line-height: 72rpx;
        }
        .more_box {
          width: 156rpx;
          height: 56rpx;
          background: #ffffff;
          border-radius: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          .text {
            width: 52rpx;
            height: 48rpx;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 48rpx;
            margin-left: 32rpx;
          }
          .img {
            width: 56rpx;
            height: 56rpx;
          }
        }
      }
      .content {
        width: 100%;
        height: fit-content;
        .item {
          width: 100%;
          height: 324rpx;
          background: #ffffff;
          border-radius: 16rpx;
          border: 2rpx solid rgba(0, 0, 0, 0.1);
          margin-bottom: 18rpx;
          padding: 32rpx 32rpx 14rpx 32rpx;
          box-sizing: border-box;
        }
        .m_more_post_btn {
          width: 100%;
          height: 96rpx;
          background: #ffffff;
          border-radius: 16rpx;
          font-size: 32rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #007aff;
          line-height: 56rpx;
          margin-top: 16rpx;
        }
      }
    }
    .footer_box {
      width: 100%;
      height: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32rpx 0 34rpx 0;
      box-sizing: border-box;
      position: relative;
      .text {
        height: 56rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #8e8e93;
        line-height: 56rpx;
      }
    }
  }
  .login_box {
    width: 708rpx;
    height: 128rpx;
    background: rgba(1, 1, 1, 0.75) rgba(255, 255, 255, 0.3)
      rgba(255, 255, 255, 0.05);
    background: rgba(1, 1, 1, 0.75);
    border-radius: 16rpx;
    // backdrop-filter: blur(14rpx);
    position: fixed;
    left: 20rpx;
    bottom: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx 42rpx 30rpx 44rpx;
    box-sizing: border-box;
    .logo {
      width: 68rpx;
      height: 68rpx;
    }
    .middle {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      font-family: PingFangSC-Regular, PingFang SC;
      margin-left: 24rpx;
      .name {
        width: 130rpx;
        height: 36rpx;
        font-size: 26rpx;
        color: #ffffff;
        line-height: 36rpx;
      }
      .tips {
        width: 280rpx;
        height: 32rpx;
        font-size: 20rpx;
        color: rgba(255, 255, 255, 0.85);
        line-height: 32rpx;
      }
    }
    .m_login_btn {
      width: 144rpx;
      height: 56rpx;
      background: linear-gradient(315deg, #f8dca7 0%, #fce8c1 100%);
      border-radius: 28rpx;
      padding: 0;
      border: unset;
      font-size: 24rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #503818;
      line-height: 32rpx;
      margin-left: 106rpx;
    }
  }
  .m_add_programme_popup {
    &.van-popup {
      background-color: unset;
    }
    &.van-popup--center {
      transform: translate3d(-50%, 0, 0);
    }
    &.van-popup--round {
      border-radius: 10rpx;
    }
    .popup_box {
      width: 686rpx;
      height: 1080rpx;
      background: transparent;
      opacity: 0.9;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .add {
        width: 100%;
        height: 968rpx;
      }
      .close {
        width: 80rpx;
        height: 80rpx;
        margin-top: 32rpx;
        border: 3rpx solid #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .img {
          width: 56rpx;
          height: 56rpx;
        }
      }
    }
  }
}
